const path = require('path')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')

module.exports = {
    // 开发环境
    mode: 'development',

    // 入口配置
    entry:'./src/index.js',

    // 输出配置
    output:{
        path: path.resolve(__dirname,'dist') ,
        filename: 'bundle.js'
    },

    // 模块的处理配置
    module:{
        // 模块的匹配规则
        rules:[
            // 后缀为名.css的文件通过css-loader处理
            {   
                // 文件名匹配规则
                test:/\.css$/,
                // 处理匹配文件的loader  （注意 loader 从右向左顺序执行）
                use: [MiniCssExtractPlugin.loader, 'css-loader']
            },
            // 匹配后缀为.less
            {
                test:/\.less$/,
                use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader']
            },
            // 通过 Asset Modules 处理以下后缀名的图片或字体文件
            {
                test: /\.(png|jpe?g|gif|svg|eot|ttf|woff|woff2)$/i,
                type: "asset"
            },
            {
                // 处理 js、mjs 文件
                test: /\.m?js$/,
                // 配置 babel-loader
                use: {
                    // loader 的名称
                    loader: 'babel-loader',

                    // loader 的配置
                    options: {
                        // babel 的预设配置
                        presets: ['@babel/preset-env'],
                        // babel 的插件
                        plugins: ['@babel/plugin-transform-runtime']
                    }
                },
                // 忽略处理那些通过包管理器安装的代码目录，否则会非常缓慢
                exclude: /(node_modules|bower_components)/
            },
            {
                test: /\.(htm|html)$/i,
                loader: 'html-withimg-loader'
            }
        ]
    },
     
    // 插件配置
    plugins: [
        new MiniCssExtractPlugin(),
        new HtmlWebpackPlugin({
            template: 'index.html'   // 页面模板
        }),
        new CleanWebpackPlugin()
    ],

    // 开发服务器
    devServer: {
        // 资源目录
        static: {
            directory: path.join(__dirname, 'dist')
        },
        // 服务器端口
        port: 9000,
        // 启用压缩
        compress: true,
        // 启用 HMR 模块热更新
        hot: true,
    },
    // 生成调试文件
    devtool: 'source-map',
}